<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
    <title>会员中心</title>
    <meta name="keywords" content="">
    <meta name="description" content="">
    <script src="js/rem.js"></script>
    <script src="js/jquery.min.js" type="text/javascript"></script>
    <script src="https://cdn.bootcss.com/vue/2.4.4/vue.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.js"></script>
    <link rel="stylesheet" type="text/css" href="css/base.css"/>
    <link rel="stylesheet" type="text/css" href="css/page.css"/>
    <link rel="stylesheet" type="text/css" href="css/all.css"/>
    <link rel="stylesheet" type="text/css" href="css/mui.min.css"/>
    <link rel="stylesheet" type="text/css" href="css/loaders.min.css"/>
    <link rel="stylesheet" type="text/css" href="css/loading.css"/>
    <link rel="stylesheet" type="text/css" href="slick/slick.css"/>
    <script src="js/vue-2.4.0.js"></script>
    <script src="js/axios_v0.12.0.js"></script>
    <script type="text/javascript">
        $(window).load(function () {
            $(".loading").addClass("loader-chanage")
            $(".loading").fadeOut(300)
        })
    </script>
</head>
<!--loading页开始-->
<div class="loading">
    <div class="loader">
        <div class="loader-inner pacman">
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
        </div>
    </div>
</div>
<!--loading页结束-->
<body>
<!--header star-->
<header class="mui-bar mui-bar1 mui-bar-nav mui-bar-nav1" id="header">
    <a class="btn" href="javascript:history.go(-1)">
        <i class="iconfont icon-fanhui"></i>
    </a>
    <div class="top-sch-box top-sch-boxtwo top-sch-boxthree flex-col">
        返回
    </div>
</header>
<!--header end-->

<div class="warp clearfloat">
    <div class="h-top clearfloat box-s">
        <div class="tu clearfloat fl">
            <img id="avatar-img" style="border-radius:50%" src="img/touxiang.png"/>
            <!--            <img style="border-radius:50%" src="avatar/10/6cca1403jw1f8h47b7kbyj20gn0gpmxv.jpg"/>-->
        </div>
        <div class="content clearfloat fl">
            <table>
                <tr>
                    <td><p class="hname fullname">王小二</p></td>
                    <td style="width: 1em"></td>
                    <td><p class="hname loginname" style="font-size: 0.8em">登陆账号：王小二</p></td>
                </tr>
            </table>
            <p class="htel">13035059866</p>
            <p class="hpthy">普通会员</p>
        </div>
        <a href="#" class="btn db clearfloat fr ra3 checkButton">签到</a>
    </div>
    <div id="point" class="cash clearfloat">
        <div class="shang xia clearfloat">
            <ul>
                <li>
                    <a href="#">
                        <p id="cash"></p>
                        <span>现金余额</span>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <p v-if="datas!=null">{{datas.num.toFixed(0)}}</p>
                        <p v-else>
                            0
                        </p>
                        <span>可用积分</span>
                    </a>
                </li>
                <!--                <li>-->
                <!--                    <a href="#">-->
                <!--                        <p>104598</p>-->
                <!--                        <span>待用积分</span>-->
                <!--                    </a>-->
                <!--                </li>-->
            </ul>
        </div>
        <!--        <div class="shang xia clearfloat">-->
        <!--            <ul>-->
        <!--                <li>-->
        <!--                    <a href="#">-->
        <!--                        <p>31000</p>-->
        <!--                        <span>商品兑换券</span>-->
        <!--                    </a>-->
        <!--                </li>-->
        <!--                <li>-->
        <!--                    <a href="#">-->
        <!--                        <p>56179</p>-->
        <!--                        <span>可倍增积分额值</span>-->
        <!--                    </a>-->
        <!--                </li>-->
        <!--            </ul>-->
        <!--        </div>-->
    </div>
    <div class="cashlist clearfloat">
        <ul>
            <li class="box-s">
                <a href="account.html">
                    <p class="fl">现金账户管理</p>
                    <i class="iconfont icon-jiantou1 fr"></i>
                </a>
            </li>
            <li class="box-s">
                <a href="recharge.html">
                    <p class="fl">现金充值</p>
                    <i class="iconfont icon-jiantou1 fr"></i>
                </a>
            </li>
            <li class="box-s">
                <a href="zhuanzhang.html">
                    <p class="fl">现金转账</p>
                    <i class="iconfont icon-jiantou1 fr"></i>
                </a>
            </li>
        </ul>
    </div>
<!--    <div class="cashlist clearfloat">-->
<!--        <ul>-->
<!--            <li class="box-s">-->
<!--                <a href="jfguanli.html">-->
<!--                    <p class="fl">积分记录管理</p>-->
<!--                    <i class="iconfont icon-jiantou1 fr"></i>-->
<!--                </a>-->
<!--            </li>-->
<!--            <li class="box-s">-->
<!--                <a href="jfguanli.html">-->
<!--                    <p class="fl">待用积分管理</p>-->
<!--                    <i class="iconfont icon-jiantou1 fr"></i>-->
<!--                </a>-->
<!--            </li>-->
<!--            <li class="box-s">-->
<!--                <a href="jfguanli.html">-->
<!--                    <p class="fl">业务奖励积分</p>-->
<!--                    <i class="iconfont icon-jiantou1 fr"></i>-->
<!--                </a>-->
<!--            </li>-->
<!--            <li class="box-s">-->
<!--                <a href="jfzhuanyong.html">-->
<!--                    <p class="fl">可用转待用</p>-->
<!--                    <i class="iconfont icon-jiantou1 fr"></i>-->
<!--                </a>-->
<!--            </li>-->
<!--            <li class="box-s">-->
<!--                <a href="jfzhuanzhang.html">-->
<!--                    <p class="fl">可用积分转账</p>-->
<!--                    <i class="iconfont icon-jiantou1 fr"></i>-->
<!--                </a>-->
<!--            </li>-->
<!--        </ul>-->
<!--    </div>-->
<!--    <div class="cashlist clearfloat">-->
<!--        <ul>-->
<!--            <li class="box-s">-->
<!--                <a href="spduihuan.html">-->
<!--                    <p class="fl">商品兑换券</p>-->
<!--                    <i class="iconfont icon-jiantou1 fr"></i>-->
<!--                </a>-->
<!--            </li>-->
<!--            <li class="box-s">-->
<!--                <a href="baodan.html">-->
<!--                    <p class="fl">报单商品券</p>-->
<!--                    <i class="iconfont icon-jiantou1 fr"></i>-->
<!--                </a>-->
<!--            </li>-->
<!--        </ul>-->
<!--    </div>-->
    <div class="cashlist clearfloat">
<!--        <ul>-->
<!--            <li class="box-s">-->
<!--                <a href="sqlianmeng.html">-->
<!--                    <p class="fl">申请联盟商家</p>-->
<!--                    <i class="iconfont icon-jiantou1 fr"></i>-->
<!--                </a>-->
<!--            </li>-->
<!--            <li class="box-s">-->
<!--                <a href="sqyunying.html">-->
<!--                    <p class="fl">申请运营中心</p>-->
<!--                    <i class="iconfont icon-jiantou1 fr"></i>-->
<!--                </a>-->
<!--            </li>-->
        <ul>
            <li class="box-s">
                <a href="jfguanli.html">
                    <p class="fl">积分记录管理</p>
                    <i class="iconfont icon-jiantou1 fr"></i>
                </a>
            </li>
            <li class="box-s">
                <a href="order.html">
                    <p class="fl">消费订单管理</p>
                    <i class="iconfont icon-jiantou1 fr"></i>
                </a>
            </li>
<!--            <li class="box-s">-->
<!--                <a href="friend.html">-->
<!--                    <p class="fl">我的好友</p>-->
<!--                    <i class="iconfont icon-jiantou1 fr"></i>-->
<!--                </a>-->
<!--            </li>-->
            <li class="box-s">
                <a href="xiugai.html">
                    <p class="fl">修改密码</p>
                    <i class="iconfont icon-jiantou1 fr"></i>
                </a>
            </li>
            <li class="box-s">
                <a href="xiugainame.html">
                    <p class="fl">修改信息</p>
                    <i class="iconfont icon-jiantou1 fr"></i>
                </a>
            </li>
            <li class="box-s">
                <a href="address.html">
                    <p class="fl">地址管理</p>
                    <i class="iconfont icon-jiantou1 fr"></i>
                </a>
            </li>
        </ul>
    </div>
    <a href="#" id="logout" class="center-btn db ra3">退出登录</a>
</div>

<!--footer star-->
<footer class="page-footer fixed-footer" id="footer">
    <ul>
        <li>
            <a href="index.html">
                <i class="iconfont icon-shouye"></i>
                <p>商城</p>
            </a>
        </li>
        <li>
            <a href="#">
                <i class="iconfont icon-erweima1"></i>
                <p>二维码</p>
            </a>
        </li>
        <li>
            <a href="#">
                <i class="iconfont icon-kefu1"></i>
                <p>客服</p>
            </a>
        </li>
        <li class="active">
            <a href="center.html">
                <i class="iconfont icon-yonghuming"></i>
                <p>我的</p>
            </a>
        </li>
    </ul>
</footer>
<!--footer end-->
</body>
<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
<script src="js/mui.min.js"></script>
<script src="js/others.js"></script>
<script type="text/javascript" src="js/hmt.js"></script>
<script src="slick/slick.js" type="text/javascript"></script>
<!--插件-->
<link rel="stylesheet" href="css/swiper.min.css">
<script src="js/swiper.jquery.min.js"></script>
<script>
    $(function () {


        var localVue =  new Vue({
            el: '#point',
            data: {
                datas: {
                    num:0,
                }
            }
        })


        $.get("/users/getUserInfo", function (result) {
            if (result.state == 1000) {
                let user = result.user;
                // $("#hname").val(user.username)
                $(".loginname").text("(" + user.username + ")")
                if(!user.usernameFull){
                    $(".fullname").text(user.username)
                }else{
                    $(".fullname").text(user.usernameFull)
                }

                $(".htel").text(user.phone)

                //<img id="avatar-img" style="border-radius:50%" src="img/touxiang.png"/>
                if(!user.avatar){
                    $("#avatar-img").attr("src", "img/touxiang.png")
                }else{
                    $("#avatar-img").attr("src", user.avatar)
                }


                console.log(result.data);

                // initButton();
                // initAnimate();
                // initCartButton(id);
            } else {
                history.replaceState(null, null, 'login.html')
                window.location.reload()
            }
        });
        //获取当前用户积分
        $.get("/points/getByUid", function (result) {
            if (result.state == 1000) {
                // new Vue({
                //     el: '#point',
                //     data: {
                //         datas: result.data
                //     }
                // })
                localVue.datas = result.data
            }
        })

        //获取当前用户金额
        $.get("/cash/getCashByUid", function (result) {
            if (result.state == 1000) {
                if (result.msg == false) {
                    $("#cash").html(0);
                } else {
                    $("#cash").html(result.data.account);
                }

            }
        })
        $("#logout").click(function () {
            $.post("/users/logout", function (result) {
                window.location.href = "index.html";
            });
        })

        $(".checkButton").click(function (e) {

            if($(".checkButton").hasClass("checkedOver")){return}

            //points/checkPointAdd
            var $i = $("<span />").text("签到积分+1");
            var x = e.pageX,
                y = e.pageY;
            $i.css({
                "z-index": 999999999999999999999999999999999999999999999999999999999999999999999,
                "top": y - 20,
                "left": x,
                "position": "absolute",
                "font-weight": "bold",
                "color": "#ff6651"
            });
            $("body").append($i);
            $i.animate({
                    "top": y - 180,
                    "opacity": 0
                },
                1500,
                function() {
                    $i.remove();
                });
            $(".checkButton").css("backgroundColor", "rgba(217,217,217,0.4)").css("color","rgba(59,130,67,0.4)")
            // backgroundColor("FFE2E2E2")
            $.get("/points/checkPointAdd",function (result) {
                $(".checkButton").html("已签到").toggleClass("checkedOver")
                if(localVue.datas.num)localVue.datas.num++

                // if (result.state == 1000) {
                //     if (result.msg == false) {
                //         $("#cash").html(0);
                //     } else {
                //         $("#cash").html(result.data.account);
                //     }
                // }
                // }
            })

        })
    });

</script>
</html>
